import React, { useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import '../css/code.css'
function Hello() {
  const [count, setCount] = useState({name:'hhh',age:'14'});
  console.log(count,'后');
  useEffect(() => {
    document.title=`有点急了${count}`
    let startingPoint
    const header = document.querySelector('header')
    header.addEventListener('mouseenter', (e) => {
        startingPoint = e.clientX
        header.classList.add('moving')
    })
    header.addEventListener('mouseout', (e) => {
        header.classList.remove('moving')
        header.style.setProperty('--percentage', 0.5)
    })
    header.addEventListener('mousemove', (e) => {
        let percentage = (e.clientX - startingPoint) / window.outerWidth + 0.5

        header.style.setProperty('--percentage', percentage)
    })
  });
  return (
    <Layout title="Hello" >
      <header>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '50vh',
            fontSize: '20px',
          }}>
          <div className="view" >
            <img src="../../static/img/bilibili-winter-view-1.jpg" className="morning" alt="" />
            <img src="../../static/img/bilibili-winter-view-2.png" className="afternoon" alt="" />
            <video autoPlay loop muted className="evening">
              <source src="https://assets.codepen.io/2002878/bilibili-winter-view-3.webm" type="video/webm" />
            </video>
            <img src="../../static/img//bilibili-winter-view-3-snow.png" className="window-cover" alt="" />
          </div>
          <div className="tree">
            <img src="../../static/img/bilibili-winter-tree-1.png" className="morning" alt="" />
            <img src="../../static/img/bilibili-winter-tree-2.png" className="afternoon" alt="" />
            <img src="../../static/img/bilibili-winter-tree-3.png"   className="evening" alt="" />
          </div>
        </div>
      </ header>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
            <p>You clicked {count} times</p>
    </Layout>
  );
}

export default Hello;